<!--
 * @Description: Description
 * @Author: zhangkexing
 * @Date: 2024-07-24 16:11:09
 * @LastEditors: zhangkexing
 * @LastEditTime: 2024-07-19 13:22:56
-->
<template>
  <van-tabs v-model:active="active" @click-tab="onClickTab" :class="['tabs-self',active == 1 ? 'active_1_line' : '']"
    title-active-color="#2E7DF3">
    <van-tab>
      <template #title>
        <div :class="['tabbar-title',active == 0 ? 'tabbar-title-active' : '']">
          <img v-if="active == 0" src="@/assets/image/recruitment.svg">
          <img v-else src="@/assets/image/recruitment_1.svg">
          <span>招募二维码</span>
        </div>
      </template>
      <div @click="showArea = true" :class="['institution',showArea ? 'show-right' : '']">
        <span>{{result || '选择所属机构'}}</span>
        <img src="@/assets/image/arrow-down-s.svg">
      </div>

      <div class="tab-content">
        <div class="card-qr">
          <div class="flex-center">
            <van-icon name="warning-o" style="color:#BB181F;font-size: 16px;margin-right:2px;" />
            <span style="color: #666666;font-size: 14px;">当前可招募的剩余名额：{{2}}</span>
          </div>

          <div class="qrcode-box">
            <span v-if="!qrcodeList[0].vm">请在上方选择所属机构</span>
            <div id="imgContainer0"></div>
          </div>

          <van-button @click="downloadQRCode" :disabled="disabled" style="margin-bottom:28px" type="primary"
            size="large">保存二维码至手机</van-button>
        </div>
      </div>

      <van-popup v-model:show=" showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
      </van-popup>
    </van-tab>
    <van-tab>
      <template #title>
        <div :class="['tabbar-title',active == 1 ? 'tabbar-title-active' : '']">
          <img v-if="active == 1" src="@/assets/image/sexual_orientation_test.svg">
          <img v-else src="@/assets/image/sexual_orientation_test_1.svg">
          <span>性向测试二维码</span>
        </div>
      </template>
      <div class="tab-content">
        <div class="card-qr">

          <div class="qrcode-box">
            <div id="imgContainer1"></div>
          </div>

          <van-button @click="downloadQRCode" :disabled="disabled" style="margin-bottom:28px" type="primary"
            size="large">保存二维码至手机</van-button>
        </div>
      </div>
    </van-tab>
    <van-tab>
      <template #title>
        <div :class="['tabbar-title',active == 2 ? 'tabbar-title-active' : '']">
          <img v-if="active == 2" src="@/assets/image/contract.svg">
          <img v-else src="@/assets/image/contract_1.svg">
          <span>合同二维码</span>
        </div>
      </template>
      <div class="tab-content">
        <div class="card-qr">

          <div class="qrcode-box">
            <div id="imgContainer2"></div>
          </div>

          <van-button @click="downloadQRCode" :disabled="disabled" style="margin-bottom:28px" type="primary"
            size="large">保存二维码至手机</van-button>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup name="QrcodeBox">
import {
  getCurrentInstance,
  ref,
  reactive,
  toRefs,
  onMounted,
  nextTick,
} from "vue";
import QRCode from "qrcodejs2-fix";

const { proxy } = getCurrentInstance();
const active = ref(0);
const disabled = ref(false);
const result = ref("");
const showArea = ref(false);
const qrcodeList = reactive([
  {
    text: "https://www.baidu.com",
    vm: "",
    name: "招募二维码",
  },
  {
    text: "https://www.baidu.com",
    vm: "",
    name: "性向测试二维码",
  },
  {
    text: "https://www.baidu.com",
    vm: "",
    name: "合同二维码",
  },
]);
const areaList = reactive({
  province_list: {
    110000: "北京市",
    120000: "天津市",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
  },
});
const onConfirm = ({ selectedOptions }) => {
  console.log(selectedOptions, "selectedOptions");
  result.value = selectedOptions.map((item) => item.text).join("/");
  showArea.value = false;
  generateQRCode(0);
};
const generateQRCode = (n) => {
  let dom = document.getElementById("imgContainer" + n),
    qrcode = qrcodeList[n];
  dom && (dom.innerHTML = "");
  qrcode.vm = new QRCode(dom, {
    text: qrcode.text,
    width: 200,
    height: 200,
    correctLevel: QRCode.CorrectLevel.H,
  });
  console.log("a", qrcodeList);
};
function downloadQRCode() {
  console.log(" qrcodeList[active.value].vm", qrcodeList[active.value].vm);
  const canvas = qrcodeList[active.value].vm._oDrawing._elImage;
  const dataURL = canvas.currentSrc;
  const link = document.createElement("a");
  link.download = `${qrcodeList[active.value].name}.png`;
  link.href = dataURL;
  link.click();
}
// onMounted(() => {
//   nextTick(() => {
//     generateQRCode(0);
//   });
// });

const onClickTab = (tab) => {
  if (qrcodeList[active.value].vm) return;
  nextTick(() => {
    generateQRCode(active.value);
  });
};
</script>

<style scoped lang="scss">
.tabs-self {
  :deep(.van-tabs__line) {
    width: 88px;
    background: #2e7df3;
  }
  :deep(.van-tabs__wrap) {
    height: 68px;
  }
}
.active_1_line {
  :deep(.van-tabs__line) {
    width: 100px;
  }
}
.tabbar-title-active {
  background: #f8fbfd;
}
.tabbar-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 8px 0;
  height: 68px;
  border-radius: 4px 4px 0px 0px;
  img {
    width: 26px;
    height: 26px;
  }
  span {
    margin: 2px 0 0;
  }
}
.institution {
  position: relative;
  background-color: #fff;
  height: 54px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 15px;
    color: #999;
    font-family: PingFang SC;
  }
}
.show-right {
  img {
    transform: rotate(-90deg);
  }
}
.tab-content {
  position: relative;
  background-color: #f7f9fa;
  .card-qr {
    position: relative;
    margin: 12px 10px 0;
    padding: 16px;
    border-radius: 8px;
    /* 中性色/白色 */
    background: #fff;
    /* 阴影/中 */
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06),
      0px 4px 12px 0px rgba(0, 0, 0, 0.03);

    .qrcode-box {
      padding: 10px;
      box-sizing: content-box;
      width: 200px;
      height: 200px;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 系统主要色 */
      border: 2px dashed #2e7df3;
      color: #999999;
      margin: 40px 50%;
      transform: translateX(-50%);
      font-size: 14px;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
}
</style>